<!DOCTYPE html>
<html>
	<head>
		<title>接口表-添加/修改/明细</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- 所有的 css js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">

		<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>

		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>

		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>

		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/config.js"></script>
	</head>
	<body>
		<div class="vue-box" :class="{sbot: id}" style="display: none;" :style="'display: block;'">
			<!-- ------- 内容部分 ------- -->
			<div class="s-body">
				<div class="c-panel">
					<div class="c-title">{{title}}</div>

					<el-form v-if="entity" :rules="rules" ref="data-table" label-width="100px" :model="entity"
						:disabled="show === 1">
						<el-form-item label="功能ID" prop="functionId">
							<el-select v-model="entity.functionId" placeholder="请选择" :clearable="true"
								no-data-text="加载中">
								<el-option v-for="(item, index) in menus" :key="index" :label="item.name"
									:value="item.id">
									<span style="float: left">{{ item.name }}</span>
									<span style="float: right; color: #8492a6; font-size: 13px">
										{{ item.identity }}
									</span>
								</el-option>
							</el-select>

						</el-form-item>

						<el-form-item label="接口名称" prop="name">
							<el-input v-model="entity.name"></el-input>
						</el-form-item>

						<el-form-item label="模块" prop="modular">
							<el-input v-model="entity.modular"></el-input>
						</el-form-item>

						<el-form-item label="请求方式" prop="method">
							<el-select v-model="entity.method" placeholder="请选择">
								<el-option label="GET" value="GET"></el-option>
								<el-option label="POST" value="POST"></el-option>
								<el-option label="PUT" value="PUT"></el-option>
								<el-option label="DELETE" value="DELETE"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="请求路径" prop="url">
							<el-input v-model="entity.url" type="textarea"></el-input>
						</el-form-item>


						<el-form-item label="请求内容格式" prop="contentType">
							<el-input v-model="entity.contentType" type="textarea"></el-input>
						</el-form-item>

						<el-form-item label="状态" prop="status">
							<el-switch v-model="entity.status" :active-value="1" :inactive-value="0"
								inactive-color="#ff4949"></el-switch>
						</el-form-item>

						<el-form-item label="请求样例|模板" prop="requestDemo">
							<el-input v-model="entity.requestDemo" type="textarea"></el-input>
						</el-form-item>

						<el-form-item label="请求响应报文样例" prop="responseDemo">
							<el-input v-model="entity.responseDemo" type="textarea"></el-input>
						</el-form-item>

						<el-form-item label="备注" prop="remark">
							<el-input v-model="entity.remark" type="textarea"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<!-- ------- 底部按钮 ------- -->
			<div class="s-foot">
				<el-button type="primary" @click="ok()">确定</el-button>
				<el-button @click="sa.closeCurrIframe()">取消</el-button>
			</div>
		</div>
		
		<script src="../../sa-resources/element-ui-helper.js"></script>
		<script src="../../sa-resources/api.js"></script>
		<script src="../../sa-resources/wuyan.js"></script>

		<script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					title: '数据添加',
					// 获取超链接中的id参数（0=添加，非0=修改）
					id: parseInt(sa.p('id', 0)),
					// 是否为展示状态，该状态下不可修改数据（1为展示状态）
					show: parseInt(sa.p('show', 0)),
					menus: [],
					// 实体对象
					entity: null,
					// 数据校验规则
					rules: {}
				},
				mounted: function() {
					axiosConfig(axios)
					this.init()
				},
				methods: {
					init() {
						// 初始化数据
						if (this.id <= 0) {
							this.entity = this.createModel();
						} else {
							this.title = this.show === 1 ? '数据查看' : '数据修改'

							let loading = elLoadding({
								that: this
							})

							let url = getUrl('pub-api', 'getOne', [this.id])
							let http = getHttp(axios, 'pub-api', 'getOne')
							http(url, {}).then(res => {
									this.entity = res
									loading.close();
								})
								.catch((err) => { // 请求失败处理
									sa.error(err.msg);
									loading.close();
								});
						}

						// 功能列表
						let url = getUrl('pub-function', 'list')
						let http = getHttp(axios, 'pub-function', 'list')
						let queryParams = []
						http(url, {
								params: {
									isPage: false,
									params: JSON.stringify(queryParams)
								}
							}).then(res => {
								if (res.list) this.menus = res.list
							})
							.catch((err) => {});
					},

					// 创建一个 默认Model
					createModel: function() {
						return {
							functionId: 0,
							name: '',
							modular: '',
							url: '',
							method: 'GET',
							contentType: '',
							status: 1,
							requestDemo: '',
							responseDemo: '',
							remark: '',
						}
					},

					// 提交数据
					ok: function() {
						if (this.show === 1) {
							sa.closeCurrIframe();
							return
						}

						let loading = elLoadding({
							that: this
						})

						this.$refs['data-table'].validate((valid) => {
							if (valid) {
								let loading = elLoadding({
									that: this
								})
								let params = fmtAToB(this.createModel(), this.entity)

								let url = getUrl('pub-api', this.id <= 0 ? 'add' : 'edit', this.id <= 0 ?
									undefined : [this.id])
								let http = getHttp(axios, 'pub-api', this.id <= 0 ? 'add' : 'edit')
								http(url, params).then(res => {
										this.entity = res
										loading.close()
										this.clean()
									})
									.catch((err) => {
										sa.error(err.msg)
										loading.close()
									});
							} else {
								sa.error('参数校验失败');
								return false;
							}
						});
					},

					// 添加/修改 完成后的动作
					clean: function() {
						if (this.id === 0) {
							this.entity = this.createModel();
						} else {
							parent.app.f5(); // 刷新父页面列表
							sa.closeCurrIframe(); // 关闭本页
						}
					}
				}
			})
		</script>
	</body>
</html>
